import React from "react";
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: []
        }
    }
    componentDidMount() {
        this.$axios
            .get(
                "https://apipc-xiaotuxian-front.itheima.net/home/special"
            )
            .then(res => {
                // console.log(res);
                if (res.data.msg == '操作成功') {
                    this.setState({
                        arr: res.data.result
                    });
                }

            });
    }
    render() {
        return <div>
            <div className="home-panel" data-v-39dda62a="" data-v-2ff17d82="">
                <div className="container" data-v-39dda62a="">
                    <div className="head" data-v-39dda62a="">
                        <h3 data-v-39dda62a="">最新专题<small data-v-39dda62a=""></small></h3>
                        <a aria-current="page"
                            href="#"
                            className="router-link-active router-link-exact-active xtx-more"
                            data-v-d6f2c104=""
                            data-v-2ff17d82="" ><span data-v-d6f2c104="">查看全部</span>
                            <i className="iconfont icon-angle-right" data-v-d6f2c104=""></i></a>
                    </div>
                    <div className="special-list" data-v-2ff17d82="">
                        {this.state.arr.map((item, index) => {
                            return <div className="special-item" data-v-2ff17d82="" key={index}>
                                <a aria-current="page"
                                    href="#"
                                    className="router-link-active router-link-exact-active"
                                    data-v-2ff17d82=""
                                ><img src={item.detailsUrl}
                                    alt=""
                                    data-v-2ff17d82="" />
                                    <div className="meta" data-v-2ff17d82="">
                                        <p className="title" data-v-2ff17d82="">
                                            <span className="top1 ellipsis" data-v-2ff17d82="">{item.title}</span>
                                            <span className="sub ellipsis" data-v-2ff17d82="">{item.summary}</span>
                                        </p>
                                        <span className="price" data-v-2ff17d82="">¥{item.lowestPrice}起</span>
                                    </div></a>
                                <div className="foot" data-v-2ff17d82="">
                                    <span className="like" data-v-2ff17d82=""><i className="iconfont icon-hart1" data-v-2ff17d82="">
                                    </i>{item.collectNum}</span>
                                    <span className="view" data-v-2ff17d82="">
                                        <i className="iconfont icon-see" data-v-2ff17d82=""></i>{item.replyNum}</span>
                                    <span className="reply" data-v-2ff17d82=""
                                    ><i className="iconfont icon-message" data-v-2ff17d82="">
                                        </i>{item.viewNum}</span
                                    >
                                </div>
                            </div>
                        })}

                    </div>
                </div>
            </div>
        </div>
    }
}